<template>
  <div id="education-nav">
    <el-card class="box-card">
      <div class="education-navhed">
        <div class="popout-wrap">
          <div
            :class="['first-data', { active: v.id == active }]"
            v-for="v in educationList"
            :key="v.id"
          >
            <p class="first-title" @click="handleClick(v)">
              {{ v.name }} <span class="el-icon-arrow-right"></span>
            </p>
            <ul class="popout-ul">
              <li
                class="second-data"
                :class="['first-data2', { active2: m.id == active2 }]"
                v-for="m in v.childList"
                :key="m.id"
                @click="showList(m.childList, m.id)"
              >
                <span>{{ m.name }}</span>
                <!-- <div class="third-data">
                                    <p v-for="n in m.childList" :key="n.id">{{ n.name }}</p>
                                </div> -->
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { openApiSysIdeologicalEducationQuery } from '@/api/openApi'
import Bus from '@/utils/bus.js'
export default {
  data() {
    return {
      active: '',
      active2: '',
      educationList: [],
      listQuery2: {
        page: 1,
        limit: 100,
        type: 1,
      },
    }
  },

  watch: {
    $route(to, from) {},
  },
  mounted() {
    this.getEducation()
  },
  methods: {
    getEducation() {
      openApiSysIdeologicalEducationQuery(this.listQuery2).then((res) => {
        this.educationList = res.data.data

        if (this.educationList.length > 0) {
          if (this.educationList[0].childList.length > 0) {
            if (this.educationList[0].childList[0].childList.length > 0) {
              if (this.$route.query.id) {
                let data = {
                  id: this.$route.query.id,
                  type: 2,
                }
                Bus.$emit('showEducation', data)
              } else {
                let data = {
                  id: this.educationList[0].childList[0].id,
                  type: 1,
                }
                Bus.$emit('showEducation', data)
              }
            }
          }
        }
      })
    },
    handleClick(v) {
      this.active = v.id
    },
    showList(item, id) {
      let data = {
        id: id,
        type: 1,
      }
      Bus.$emit('showEducation', data)
      this.active2 = id
    },
  },
}
</script>
<style  lang="scss" >
#education-nav {
  .el-card.box-card.is-always-shadow {
    border-left: 5px solid #930b0b;
  }
  .popout-wrap {
    .first-data {
      padding-left: 20px;
      background: #fff;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
      .first-title {
        position: relative;
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        color: #333;
        span {
          position: absolute;
          right: 10px;
          top: 14px;
          font-size: 18px;
          font-weight: bold;
          color: #999;
        }
      }
    }

    .popout-ul {
      display: none;
      .active2 {
        background: #f5f5f5;
        border-right: 3px solid var(--colorH1);
      }
      li {
        position: relative;
        padding: 10px;
        line-height: 1.4;
        font-size: 14px;
        color: #333;
        border-right: 3px solid transparent;
        border-bottom: 1px solid #eee;
        &:last-child {
          border-bottom: 0 none;
        }

        &:hover {
          border-right: 3px solid var(--colorH1);
          background: #f5f5f5;
          .third-data {
            display: block;
          }
        }
        .third-data {
          display: none;
          position: absolute;
          left: 101%;
          top: 0;
          width: 240px;
          padding: 10px 0;
          border: 1px solid #eee;
          background: rgba(255, 255, 255, 1);
          p {
            padding: 8px;
            line-height: 1.6;
            font-size: 14px;
            color: #666;
            border-bottom: 1px dashed #eee;
            &:last-child {
              border-bottom: 0 none;
            }
            &:hover {
              color: var(--colorH1);
            }
          }
        }
      }
    }
    .active {
      .popout-ul {
        display: block;
      }
      .first-title {
        span {
          transition: all 0.3s;
          transform: rotate(90deg);
        }
      }
    }
  }
}
</style>